<template>
  <div>
    <Header></Header>

    <!--主体部分-->
    <div class="container">
      <div class="contain">
        <div class="aside">
          <div class="ranking-box-wrapper">
            <div class="panel">
              <div class="panel-header">
                <span class="panel-title">
                  <span class="textcolor_red">
                    <h2>今日票房</h2>
                  </span>
                </span>
              </div>
              <div class="panel-content">
                <ul class="ranking-wrapper ranking-box">
                  <li class="ranking-item ranking-top ranking-index-1">
                    <a href="">
                      <div class="ranking-top-left">
                        <i class="ranking-top-icon"></i>
                        <img
                          class="ranking-img default-img"
                          src="../assets/1.jpg"
                          alt="穿过寒冬拥抱你电影海报"
                        />
                      </div>
                      <div class="ranking-top-right">
                        <div class="ranking-top-right-main">
                          <span class="ranking-top-movie-name">
                            穿过寒冬拥抱你
                          </span>
                          <p class="ranking-top-wish">
                            <span class="stonefont">113.23</span>
                            万
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="ranking-item ranking-index-2">
                    <a
                      href="/films/1414385"
                      target="_blank"
                      data-act="ticketList-movie-click"
                      data-val="{movieid:1414385}"
                    >
                      <span class="normal-link">
                        <i class="ranking-index">2</i>
                        <span class="ranking-movie-name">爱情神话</span>

                        <span class="ranking-num-info">
                          <span class="stonefont">102.3</span>万
                        </span>
                      </span>
                    </a>
                  </li>
                  <li class="ranking-item ranking-index-3">
                    <a
                      href="/films/1412992"
                      target="_blank"
                      data-act="ticketList-movie-click"
                      data-val="{movieid:1412992}"
                    >
                      <span class="normal-link">
                        <i class="ranking-index">3</i>
                        <span class="ranking-movie-name">李茂扮太子</span>

                        <span class="ranking-num-info">
                          <span class="stonefont"
                            >&#xf339;&#xe05f;.&#xe05f;&#xeb45;</span
                          >万
                        </span>
                      </span>
                    </a>
                  </li>
                  <li class="ranking-item ranking-index-4">
                    <a
                      href="/films/1277950"
                      target="_blank"
                      data-act="ticketList-movie-click"
                      data-val="{movieid:1277950}"
                    >
                      <span class="normal-link">
                        <i class="ranking-index">4</i>
                        <span class="ranking-movie-name"
                          >反贪风暴5：最终章</span
                        >

                        <span class="ranking-num-info">
                          <span class="stonefont"
                            >&#xe4ba;&#xe4ba;.&#xe928;&#xeb45;</span
                          >万
                        </span>
                      </span>
                    </a>
                  </li>
                  <li class="ranking-item ranking-index-5">
                    <a
                      href="/films/1427538"
                      target="_blank"
                      data-act="ticketList-movie-click"
                      data-val="{movieid:1427538}"
                    >
                      <span class="normal-link">
                        <i class="ranking-index">5</i>
                        <span class="ranking-movie-name">以年为单位的恋爱</span>

                        <span class="ranking-num-info">
                          <span class="stonefont"
                            >&#xe4ba;&#xe928;.&#xe4ba;&#xf10c;</span
                          >万
                        </span>
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="box-total-wrapper clearfix">
                <h3>今日大盘</h3>
                <div>
                  <p>
                    <span class="num"
                      ><span class="stonefont"
                        >&#xf10c;&#xeb45;&#xf270;.&#xe215;</span
                      ></span
                    >万
                    <a
                      class="more"
                      target="_blank"
                      data-act="moreDayTip-click"
                      href="https://piaofang.maoyan.com/"
                      >查看更多 <span class="panel-arrow panel-arrow-red"></span
                    ></a>
                  </p>
                  <p class="meta-info">
                    北京时间 00:09:32
                    <span class="pull-right">猫眼专业版实时票房数据</span>
                  </p>
                </div>
              </div>
              <div class="most-expect-wrapper">
                <div class="panel">
                  <div class="panel-header">
                    <span class="panel-more">
                      <a href="" class="textcolor_orange">
                        <span> 查看完整榜单 </span>
                      </a>
                      <span class="panel-arrow panel-arrow-orange"></span>
                    </span>
                    <span class="panel-title">
                      <span class="textcolor_orange">
                        <h2>最受期待</h2>
                      </span>
                    </span>
                  </div>
                  <div class="panel-content">
                    <ul class="ranking-wrapper ranking-mostExpect">
                      <li class="ranking-item ranking-top ranking-index-1">
                        <a
                          href="/films/1433696"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1433696}"
                        >
                          <div class="ranking-top-left">
                            <i class="ranking-top-icon"></i>
                            <img
                              class="ranking-img default-img"
                              src="../assets/2.jpg"
                              alt="这个杀手不太冷静电影海报"
                            />
                          </div>
                          <div class="ranking-top-right">
                            <div class="ranking-top-right-main">
                              <span class="ranking-top-moive-name"
                                >这个杀手不太冷静</span
                              >

                              <p class="ranking-release-time">
                                上映时间：2022-02-01
                              </p>

                              <p class="ranking-top-wish1">
                                <span class="stonefont"
                                  >&#xec54;&#xf10c;&#xec54;&#xf270;&#xe928;&#xeb45;</span
                                >人想看
                              </p>
                            </div>
                          </div>
                        </a>
                      </li>
                      <li class="ranking-item ranking-index-2">
                        <a
                          href="/films/1368677"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1368677}"
                        >
                          <i class="ranking-index">2</i>
                          <span class="img-link"
                            ><img
                              class="ranking-img default-img"
                              src="../assets/3.jpg"
                              alt="超能一家人电影海报"
                          /></span>
                          <div class="name-link ranking-movie-name">
                            超能一家人
                          </div>

                          <span class="ranking-num-info"
                            ><span class="stonefont"
                              >&#xf336;&#xec54;&#xe05f;&#xf339;&#xe4ba;&#xe05f;</span
                            >人想看</span
                          >
                        </a>
                      </li>
                      <li class="ranking-item ranking-index-3">
                        <a
                          href="/films/1383307"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1383307}"
                        >
                          <i class="ranking-index">3</i>
                          <span class="img-link"
                            ><img
                              class="ranking-img default-img"
                              src="../assets/4.jpg"
                              alt="奇迹电影海报"
                          /></span>
                          <div class="name-link ranking-movie-name">奇迹</div>

                          <span class="ranking-num-info"
                            ><span class="stonefont"
                              >&#xe928;&#xf336;&#xe215;&#xf10c;&#xe215;&#xf339;</span
                            >人想看</span
                          >
                        </a>
                      </li>
                      <li class="ranking-item ranking-index-4">
                        <a
                          href="/films/1389048"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1389048}"
                        >
                          <span class="normal-link">
                            <i class="ranking-index">4</i>
                            <span class="ranking-movie-name">四海</span>

                            <span class="ranking-num-info">
                              <span class="stonefont"
                                >&#xe928;&#xe215;&#xf336;&#xe4ba;&#xe928;&#xe215;</span
                              >人想看
                            </span>
                          </span>
                        </a>
                      </li>
                      <li class="ranking-item ranking-index-5">
                        <a
                          href="/films/1405863"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1405863}"
                        >
                          <span class="normal-link">
                            <i class="ranking-index">5</i>
                            <span class="ranking-movie-name"
                              >熊出没·重返地球</span
                            >

                            <span class="ranking-num-info">
                              <span class="stonefont"
                                >&#xe05f;&#xe4ba;&#xf10c;&#xf336;&#xe4ba;&#xe4ba;</span
                              >人想看
                            </span>
                          </span>
                        </a>
                      </li>

                      <li class="ranking-item ranking-index-6">
                        <a
                          href="/films/1298561"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1298561}"
                        >
                          <span class="normal-link">
                            <i class="ranking-index">6</i>
                            <span class="ranking-movie-name"
                              >黑客帝国：矩阵重启</span
                            >

                            <span class="ranking-num-info">
                              <span class="stonefont"
                                >&#xe05f;&#xe928;&#xeb45;&#xf339;&#xe4ba;&#xf270;</span
                              >人想看
                            </span>
                          </span>
                        </a>
                      </li>

                      <li class="ranking-item ranking-index-7">
                        <a
                          href="/films/1446115"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1446115}"
                        >
                          <span class="normal-link">
                            <i class="ranking-index">7</i>
                            <span class="ranking-movie-name"
                              >长津湖之水门桥</span
                            >

                            <span class="ranking-num-info">
                              <span class="stonefont"
                                >&#xe05f;&#xeb45;&#xe928;&#xe4ba;&#xf339;&#xf270;</span
                              >人想看
                            </span>
                          </span>
                        </a>
                      </li>

                      <li class="ranking-item ranking-index-8">
                        <a
                          href="/films/1301249"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1301249}"
                        >
                          <span class="normal-link">
                            <i class="ranking-index">8</i>
                            <span class="ranking-movie-name">平原上的火焰</span>

                            <span class="ranking-num-info">
                              <span class="stonefont"
                                >&#xec54;&#xf270;&#xf270;&#xe05f;&#xf336;&#xe928;</span
                              >人想看
                            </span>
                          </span>
                        </a>
                      </li>

                      <li class="ranking-item ranking-index-9">
                        <a
                          href="/films/1403540"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1403540}"
                        >
                          <span class="normal-link">
                            <i class="ranking-index">9</i>
                            <span class="ranking-movie-name"
                              >好想去你的世界爱你</span
                            >

                            <span class="ranking-num-info">
                              <span class="stonefont"
                                >&#xe05f;&#xf339;&#xe05f;&#xe4ba;&#xe4ba;&#xec54;</span
                              >人想看
                            </span>
                          </span>
                        </a>
                      </li>

                      <li class="ranking-item ranking-index-10">
                        <a
                          href="/films/1445469"
                          target="_blank"
                          data-act="mostExpect-movie-click"
                          data-val="{movieid:1445469}"
                        >
                          <span class="normal-link">
                            <i class="ranking-index">10</i>
                            <span class="ranking-movie-name"
                              >喜羊羊与灰太狼之筐出未来</span
                            >

                            <span class="ranking-num-info">
                              <span class="stonefont"
                                >&#xf336;&#xf270;&#xe05f;&#xf270;&#xf339;</span
                              >人想看
                            </span>
                          </span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="movie-grid">
            <div class="panel">
              <div class="panel-header">
                <span class="panel-more">
                  <a  class="textcolor_red">
                    <span>全部</span>
                  </a>
                  <span class="panel-arrow panel-arrow-red"></span>
                </span>
                <span class="panel-title">
                  <span class="textcolor_red"><h2>正在热映（37部）</h2></span>
                </span>
              </div>
              <div class="panel-content">
                <dl class="movie-list">
                  <dd v-for="item in dataList" :key="item.filmId" >
                    <div class="movie-item">
                      <a
                        target="_blank"
                        data-act="playingMovie-click"
                        data-val="{movieid:1444523}"
                      >
                        <div class="movie-poster" @click="gotodetail(item.filmId)">
                          <img class="poster-default" :src="item.poster" />
                          <img
                            class="movie-poster-img"
                            :src="item.poster"
                          />
                          <div class="movie-overlay movie-overlay-bg">
                            <div class="movie-info">
                              <div class="movie-score">
                                <i class="integer">{{item.grade}}</i
                                ><i class="fraction"></i>
                              </div>
                              <div
                                class="movie-title movie-title-padding"
                              >
                                {{item.name}}
                              </div>
                            </div>
                          </div>
                        </div>
                      </a>
                      <div class="movie-detail movie-detail-strong movie-sale">
                        <a
                          class="active"
                          target="_blank"
                          data-act="salePlayingMovie-click"
                          data-val="{movieid:1444523}"
                          @click="gotocinema(item.filmId)"
                          >购 票</a
                        >
                      </div>
                      <div class="movie-ver"><i class="imax2d">{{item.item.name}}</i></div>
                    </div>
                  </dd>
                  
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <low></low>
  </div>
</template>

<script>
import low from "../components/low";
import Header from "../components/Header";
import http from '../api/http'
export default {
  name: "home",
  components: { Header, low },
  data(){
    return{
      dataList:[],
      current:1,
      total:0
   }
  },
  mounted(){
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=1&k=3819095`,
      headers: {
        "X-Host": "mall.film-ticket.film.list"
      }
    }).then(res => {
      console.log(res)
      if (res.status == 0) {
        console.log(res.data);
        let { films } = res.data;
        this.dataList = films;
      }
    });
  },
  methods:{
    gotodetail(myid){
      this.$router.push('/detail/' + myid)
    },
    gotocinema(myid){
      this.$router.push('/cinema/'+ myid)
    }
  }
};
</script>
<style scoped>

.container {
  width: 1200px;
  margin: 0 auto;
}
.contain {
  overflow: hidden;
  margin-top: 62px;
}
.aside {
  float: right;
  width: 360px;
}
.ranking-box-wrapper {
  margin-top: 0 !important;
}
.panel {
  margin: 0;
}
.panel-header {
  overflow: hidden;
  height: 26px;
  line-height: 26px;
}
.panel-title {
  color: #ef4238;
  font-size: 26px;
}
.textcolor_red {
  color: #ef4238 !important;
}
.panel-title > span > h2 {
  display: inline;
  font-size: 26px;
  font-weight: 400;
}
.panel-content {
  overflow: hidden;
  width: 100%;
  margin-top: 23px;
}
.ranking-wrapper {
  overflow: hidden;
}
.ranking-item {
  overflow: hidden;
  cursor: pointer;
}
.ranking-index-1 {
  margin-bottom: 11px;
  border: 1px solid #efefef;
}
.ranking-top-left {
  position: relative;
  width: 120px;
  height: 78px;
  float: left;
}
.ranking-top-icon {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 25px;
  background: url(../assets/7.png) no-repeat;
  background-size: contain;
}
.ranking-img {
  vertical-align: middle;
  visibility: visible;
}
.default-img {
  background-image: url(../assets/8.png);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 68px 62px;
}
.ranking-top-right {
  height: 78px;
  line-height: 78px;
  padding-left: 10px;
  overflow: hidden;
}
.ranking-top-right-main {
  width: 220px;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.ranking-top-movie-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  color: #333;
  line-height: 25px;
}
.ranking-top-wish {
  color: #ef4238;
  margin-top: 12px;
  font-size: 14px;
}
.stonefont {
  font-family: stonefont;
}
.normal-link {
  display: block;
  height: 35px;
  line-height: 35px;
  padding: 10px 0;
}
.ranking-index {
  color: #ef4238;
  display: inline-block;
  width: 20px;
  font-size: 18px;
  vertical-align: top;
}
.ranking-item .ranking-movie-name {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #333;
  vertical-align: top;
}
.ranking-num-info {
  color: #ef4238;
  float: right;
  font-size: 14px;
}
.ranking-index:nth-child(n + 2) {
  color: #000;
}
.box-total-wrapper {
  margin-top: 29px;
  background-color: #fdfdfd;
  border: 1px solid #efefef;
  padding-right: 15px;
}
.clearfix::before {
  content: "";
  display: table;
}
.clearfix::after {
  content: "";
  overflow: hidden;
  clear: both;
  display: block;
}
.box-total-wrapper > h3 {
  float: left;
  width: 20px;
  height: 83px;
  padding: 10px;
  color: #fff;
  background-color: #ef4238;
  text-align: center;
  font-weight: 400;
  font-size: 17px;
  line-height: 21px;
}
.box-total-wrapper > div {
  font-size: 14px;
  margin-left: 54px;
  color: #ef4238;
  padding-top: 20px;
}
.box-total-wrapper > div .num {
  font-size: 30px;
  font-weight: 700;
  margin-right: 2px;
}
.box-total-wrapper > div a.more[href] {
  color: #ef4238;
  margin-top: 13px;
  float: right;
  line-height: 16px;
}
.panel-arrow-red {
  background: url(../assets/9.png) top no-repeat;
}
.panel-arrow {
  display: inline-block;
  width: 8px;
  height: 14px;
  vertical-align: top;
}
.box-total-wrapper > div .meta-info {
  color: #999;
  margin-top: 6px;
}
.pull-right {
  float: right !important;
}
.aside .most-expect-wrapper {
  margin-top: 80px;
}
.panel-more {
  font-size: 14px;
  line-height: 16px;
  float: right;
  margin-top: 10px;
}
.textcolor_orange {
  color: #ffb400 !important;
}
.panel-arrow-orange {
  background: url(../assets/10.png) top no-repeat;
}
.panel-arrow-orange .panel-title {
  font-size: 26px;
  color: #ffb400;
}
.panel-title > span > h2 {
  display: inline;
  font-size: 26px;
  font-weight: 400;
}
.ranking-mostExpect .ranking-index-1 {
  margin-bottom: 0;
}
.ranking-mostExpect .ranking-top-left {
  width: 140px;
  height: 194px;
  float: left;
  position: relative;
}
.ranking-mostExpect .ranking-top-icon {
  background-image: url(../assets/11.png);
}
.ranking-mostExpect .ranking-index-1 .ranking-img {
  width: 100%;
  height: 194px;
}
.ranking-mostExpect .ranking-top-right {
  height: 194px;
  line-height: 194px;
}
.ranking-top-right .ranking-release-time {
  margin-top: 12px;
  color: #999;
}
.ranking-top-wish1 {
  margin-top: 12px;
  font-size: 14px;
  color: #ffb400;
}
.ranking-mostExpect .ranking-index-2,
.ranking-mostExpect .ranking-index-3 {
  border: 1px solid #efefef;
  position: relative;
  width: 170px;
  float: left;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 8px;
}
.ranking-mostExpect .ranking-index-2 a,
.ranking-mostExpect .ranking-index-3 a {
  display: block;
}
.ranking-mostExpect .ranking-index-2 .ranking-index,
.ranking-mostExpect .ranking-index-3 .ranking-index {
  position: absolute;
  padding-left: 4px;
  width: 16px;
  line-height: 20px;
  color: #fff;
  background-color: #ffb400;
}
.ranking-mostExpect .ranking-index-2 .img-link img,
.ranking-mostExpect .ranking-index-3 .img-link img {
  width: 100%;
  height: 118px;
}
.ranking-mostExpect .ranking-index-2 .name-link,
.ranking-mostExpect .ranking-index-3 .name-link {
  display: block;
  font-size: 18px;
  color: #333;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: 10px;
}
.ranking-mostExpect .ranking-index-2 .ranking-num-info,
.ranking-mostExpect .ranking-index-3 .ranking-num-info {
  float: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 6px;
  margin-left: 10px;
}
.ranking-mostExpect .ranking-index-4 {
  clear: both;
}
/* 主体 */
.main {
  padding: 0 18px;
  margin-right: 363px;
}
.movie-grid {
  margin-top: -62px;
}
.movie-grid .panel {
  margin: 62px 0 0;
  width: 750px;
}
.movie-grid .panel-header {
  width: 740px;
}
.movie-list {
  margin: -29px 0 20px -25px;
}
.movie-list dd {
  margin: 30px 0 0 30px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.movie-item {
  position: relative;
  border: 1px solid #efefef;
  margin: -1px;
}
.movie-poster {
  background-color: #fcfcfc;
  width: 160px;
  height: 220px;
  overflow: hidden;
  position: relative;
}
.movie-poster .poster-default {
  top: 50%;
  left: 50%;
  width: 68px;
  height: 62px;
  margin-top: -31px;
  margin-left: -34px;
}
.movie-poster img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
}
.movie-poster .movie-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.movie-overlay-bg {
  background: url(../assets/13.png) repeat-x bottom;
}
.movie-overlay .movie-info {
  color: #fff;
  position: absolute;
  bottom: 7px;
  width: 100%;
}
.movie-score {
  color: #ffb400;
  float: right;
  margin-right: 10px;
}
.movie-score .integer {
  font-size: 18px;
}
.movie-score .fraction {
  font-size: 14px;
}
.mavie-title-padding {
  margin-right: 35px;
}
.movie-title {
  font-size: 16px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 10px;
}
.movie-detail-strong {
  height: 39px;
  line-height: 39px;
}
.movie-detail {
  height: 34px;
  line-height: 34px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.movie-sale a {
  display: block;
  font-size: 14px;
  color: #999;
}
.movie-sale a.active {
  color: #ef4238;
}
.movie-ver {
  position: absolute;
  top: 4px;
  left: -2px;
  font-size: 15px;
  color: #fff;
  background-color:skyblue;
}
.movie-ver i {
  display: inline-block;
}
.imax2d {
  width: 69px;
  height: 25px;;
}
</style>
